'use strict';
import React, {Component} from 'react';
import {
    Image, StyleSheet, Text, TouchableNativeFeedback, View, Switch,
    Picker, CheckBox
} from 'react-native';
import Color from '../../constant/Color';
import InputModal from "../modal/InputModal";
import SliderModal from "../modal/SliderModal";
import CustomSliderModal from "../modal/CustomSliderModal";

/** 单选行 */
export class CheckLine extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editable: props.editable,   // 是否可点击
            isChecked: props.isChecked, // 当前是否已选中
        }
    }

    render() {
        return (
            <TouchableNativeFeedback
                background={TouchableNativeFeedback.SelectableBackground()}
                disabled={!this.state.editable}>
                <View
                    style={styles.TitleValueLine}>
                    <Text
                        style={this.state.editable ? styles.TitleValueLineTitleEditable : styles.TitleValueLineTitleUneditable}>{this.props.title}</Text>

                    <View style={styles.TitleValueInnerLine}>
                        <CheckBox
                            value={this.state.isChecked}
                            onValueChange={(value) => this._onSwitch(value)}
                            tintColor={Color.gray}
                            disabled={!this.state.editable}/>
                    </View>
                </View>
            </TouchableNativeFeedback>
        );
    }

    _onSwitch(newValue: boolean): void {
        this.setState({isChecked: newValue});
        if (!this.props.onSwitch) return;
        this.props.onSwitch(newValue);
    }
}

//样式定义
const styles = StyleSheet.create({

    TitleValueLine: {
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: Color.white,
    },
    TitleValueLineTitleEditable: {
        flex: 1,
        color: Color.darkGray,
        fontSize: 14,
    },
    TitleValueLineTitleUneditable: {
        flex: 1,
        color: Color.gray,
        fontSize: 14,
    },

    TitleValueInnerLine: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
});

